<template>
  <div class="player">
    <div class="wrap">
        <div class="album-pic">
        <img src="../../assets/images/heardetails_pic_200_200.jpg" alt="">
      </div>
      <div class="album-info">
        <h4>{{playerData.song_title}}</h4>
        <div class="star">
          <i class="iconfont" v-for="(item,index) in playerData.star">&#xe80f;</i><span>(80人评分)</span>
        </div>
        <div class="info">
          <p> <span>歌手：{{playerData.singer}}/</span> <span>词：{{playerData.qu}}/</span> <span>曲：{{playerData.ci}}/</span> </p>
          <p> <span>语言：{{playerData.language}}/</span> <span>唱片公司：{{playerData.company}}/</span> </p>
          <p> <span>专辑：{{playerData.album}}</span> <span>发行时间：{{playerData.time}}</span> </p>
        </div>
      </div>
    </div>

    <div class="grade">
      <p>我要评分：<span> {{grade}}.0分</span></p>
      <div class="audioplayer">
        <i :class="[flag?'iconfont icon-bofang':'iconfont icon-zanting']" @click="playsong"></i>
        <audio ref="audio" :src="playerData.song_source" controls></audio>
      </div>

      <div>
        <button type="button" @click="add">好听</button>
        <i class="iconfont add" v-for="(item,index) in grade">&#xe651; </i>
        <i>分项</i>
      </div>
    </div>

    <div class="lyric">
      <p class="title">歌词</p>
      <p>{{playerData.lyric}}</p>
    </div>

    <div class="album-disc">
      <p class="title">专辑简介</p>
      <p>”{{playerData.song_disc}}”</p>
    </div>

    <div class="pic">
      <img :src="playerData.pic" alt="">
    </div>
  </div>
</template>

<script>
import CommonHeader from "@/components/CommonHeader"

export default {
  name: 'Player',
  data(){
    return{
      grade:1,
      flag:true
    }
  },
  props:{
    playerData:{
      type:Object,
      default:function(){
        return {};
      }
    }
  },
  methods:{
    add(event){
      if(this.grade<5){
        this.grade ++
      }
      return
    },
    playsong(event){
      this.flag = !this.flag;
      if(this.flag){
        this.$refs.audio.pause();
      }else {
        this.$refs.audio.play();
      }
    }
  }
  // mounted(){
  //   console.log(this.playerData);
  // }
}
</script>

<style scoped>

.player{
  width: 100%;
  padding: .1rem;
  font-size: 16px;
}
.wrap{
  display: flex;
}
.album-pic{
  width: 1.5rem;
  height:1.5rem;
}
.album-pic img{
  width: 2rem;
}
.album-info{
  width: 65%;
  margin-left: .2rem;
  position: relative;
}
h4{
  font-size: 18px;
}
.star i{
  color: #f59577;
  left: 0;
  top: .3rem;
}
.star span,.info span{
  font-size: 12px;
}
.info p{
  padding: .03rem 0;
}
.star{
  padding: .03rem 0
}
audio{
    display: none;
}
.icon-zanting,.icon-bofang{
  position: absolute;
  top:2.2rem;
  right: .2rem;
  font-size: 28px;
}
.audioplayer .icon-zanting{
  font-weight: 600;
}
.audioplayer audio{
  position: absolute;
  top:2.5rem;
  right: .2rem;
}
.grade,.grade button{
  font-size: 12px;
}
.grade span{
  color: #109D59;
}
.grade button{
  padding: .04rem;
  background: #fff;
  color: grey;
  border: 1px solid #f1f1f1;
}
.grade .add{
  font-size: 12px;
  color: #109D59;
}
.lyric{
  margin: .3rem 0;
  font-size: 14px;
}
.lyric:first-child,.title:first-child{
    color: grey;
    font-size: 14px;
    margin-bottom: .1rem;
}
.album-disc{
  margin: .3rem 0;
  font-size: 14px;
}
.pic{
  width: 95%;
}

</style>
